<template>
  <div class="Tabbar">
    <div class="db">
      <div
        @click="clickIndex(index)"
        :style="{ color: currentIndex == index ? 'blue' : '' }"
        v-for="(item, index) in dbArr"
        :key="index"
      >
        <span>{{ item }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: 0,
      dbArr: ["首页", "爆爆团", "订单", "我的"],
    };
  },
  methods: {
    clickIndex(index) {
      this.currentIndex = index;
    },
  },
};
</script>

<style lang="scss" >
.Tabbar {
  position: fixed;
  bottom: 0;
  height: 40px;
  width: 100%;
}
.Tabbar .db {
  display: flex;
  justify-content: space-around;
  text-align: center;
  line-height: 40px;
}
</style>